/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	


    var myData = [
        ['中国青年政治学院','男','中国青少年发展研究中心',100087,'9/1 12:00am'],
        ['中国青年政治学院','男','中国青少年发展研究中心',100088,'9/1 12:00am']
     
    ];

    // example of custom renderer function
    function change(val){
        if(val){
            return '<span style="color:green;">' + val + '</span>';
        }else{
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val){
            return '<span style="color:green;">' + val + '</span>';
        }else{
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price'},
           {name: 'change'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "姓名", width: 160, sortable: true, dataIndex: 'company'},
            {header: "性别", width: 75, sortable: true, dataIndex: 'price'},
            {header: "工作单位", width: 175, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "邮编", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}/*,
            {header: "出生年月", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-n-j g:i:s'), dataIndex: 'lastChange'}*/
        ],
        frame:true,
        stripeRows: true,
        height:350,
        width:600,
        title:'青少年研究专家名录'
    });

    grid.render('grid-example');

    grid.getSelectionModel().selectFirstRow();
});